<template>
  <div id="app">
    <div class="container">
      <!-- 题目 -->
      <div class="title">
        <em>管理模块</em>
        <span @click="toggleFun">{{ flag ? "收起" : "展开" }}</span>
      </div>
      <!-- 内容 -->
      <div class="content" v-show="flag">
        <div>表单管理</div>
        <div>列表管理</div>
        <div>报表管理</div>
      </div>
    </div>
  </div>
</template>

<script>
// 本地图片的引入使用import导入方式进行使用
// vue组件使用是ES6模块化的规范
export default {
  name: "App",
  components: {},
  // data:对象/函数在组件中只能是函数
  data() {
    return {
      flag: false,
    };
  },
  methods: {
    toggleFun() {
      this.flag = !this.flag;
    },
  },
};
</script>

<style>
em {
  font-style: normal;
}
.container {
  width: 200px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 10px;
}
.title span {
  font-size: 12px;
  /* 光标的小手 */
  cursor: pointer;
}
.content div {
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #ccc;
  padding: 0 10px;
}
</style>
